<template>
	<div class="office_index">
		<div class="flex main">
			<div class="flex-1 left">
				<div class="m-auto model_wrap">
					<img class="block w-100" src="../../assets/images/nine-header.jpg">
					<template v-for="(item, index) in sectionList">
						<div class="section_wrap" :key="index" :class="{'active':index+1==activeNum}"
							@click="activeNum=index+1">
							<img class="block w-100" :src="require('../../assets/images/nine'+item.imgName)"
								:alt="item.title">
						</div>
					</template>
				</div>
			</div>
			<div class="right">
				<h5 class="color-666 normal-font header">{{sectionList[activeNum-1].title}}</h5>
				<div class="main_form">
					<comp-form ref="compForm" :goods-num="sectionList[activeNum-1].num"
						:level-name="sectionList[activeNum-1].key"></comp-form>
				</div>
				<div class="text-center footer">
					<el-button style="width:200px" size="small" type="primary" @click="save">保存</el-button>
				</div>
			</div>
		</div>
		<div class="fix-footer-btns">
			<el-button size="small" type="primary" @click="submit">发布</el-button>
		</div>
	</div>
</template>

<script>
	import {
		getActivityPage,
		editActivityPage,
		release
	} from "../../api/xcx";
	import compForm from "./components/compForm";
	export default {
		components: {
			compForm
		},
		computed: {
			sectionList() {
				switch (this.pageType) {
					case '办公设备':
						return [{
								title: "商品（1+3）推荐位",
								key: 'first_level',
								imgName: '1.jpg',
								num: 4
							},
							{
								title: "商品（3+4）推荐位",
								key: 'second_level',
								imgName: '2.jpg',
								num: 7
							},
							{
								title: "商品（9）推荐位",
								key: 'third_level',
								imgName: '3.jpg',
								num: 9
							}
						];
					case '电脑平板':
						return [{
								title: "商品（3）推荐位",
								key: 'first_level',
								imgName: '5.jpg',
								num: 3
							},
							{
								title: "商品（3+4）推荐位",
								key: 'second_level',
								imgName: '7.jpg',
								num: 6
							},
							{
								title: "商品（9）推荐位",
								key: 'third_level',
								imgName: '3.jpg',
								num: 9
							}
						];
					case '健康理疗':
						return [{
								title: "商品（3）推荐位",
								key: 'first_level',
								imgName: '4.jpg',
								num: 3
							},
							{
								title: "商品（3+4）推荐位",
								key: 'second_level',
								imgName: '2.jpg',
								num: 7
							},
							{
								title: "商品（9）推荐位",
								key: 'third_level',
								imgName: '3.jpg',
								num: 9
							}
						];
					case '品牌手机':
						return [{
								title: "商品（1+4）推荐位",
								key: 'first_level',
								imgName: '6.jpg',
								num: 5
							},
							{
								title: "商品（1+4）推荐位",
								key: 'second_level',
								imgName: '6.jpg',
								num: 5
							}
						];
					case '能源设备':
						return [{
								title: "商品（3）推荐位",
								key: 'first_level',
								imgName: '4.jpg',
								num: 3
							},
							{
								title: "商品（3+4）推荐位",
								key: 'second_level',
								imgName: '2.jpg',
								num: 7
							},
							{
								title: "商品（9）推荐位",
								key: 'third_level',
								imgName: '3.jpg',
								num: 9
							}
						];
					case '开店赋能':
						return [{
								title: "商品（1+3）推荐位",
								key: 'first_level',
								imgName: '1.jpg',
								num: 4
							},
							{
								title: "商品（3+4）推荐位",
								key: 'second_level',
								imgName: '2.jpg',
								num: 7
							},
							{
								title: "商品（9）推荐位",
								key: 'third_level',
								imgName: '3.jpg',
								num: 9
							}
						];
					case '数码摄影':
						return [{
								title: "商品（3）推荐位",
								key: 'first_level',
								imgName: '5.jpg',
								num: 3
							},
							{
								title: "商品（3+4）推荐位",
								key: 'second_level',
								imgName: '7.jpg',
								num: 6
							},
							{
								title: "商品（9）推荐位",
								key: 'third_level',
								imgName: '3.jpg',
								num: 9
							}
						];
					case '游戏设备':
						return [{
								title: "商品（3）推荐位",
								key: 'first_level',
								imgName: '4.jpg',
								num: 3
							},
							{
								title: "商品（3+4）推荐位",
								key: 'second_level',
								imgName: '2.jpg',
								num: 7
							},
							{
								title: "商品（9）推荐位",
								key: 'third_level',
								imgName: '3.jpg',
								num: 9
							}
						];
					case '智能家居':
						return [{
								title: "商品（1+3）推荐位",
								key: 'first_level',
								imgName: '1.jpg',
								num: 4
							},
							{
								title: "商品（3+4）推荐位",
								key: 'second_level',
								imgName: '2.jpg',
								num: 7
							},
							{
								title: "商品（9）推荐位",
								key: 'third_level',
								imgName: '3.jpg',
								num: 9
							}
						];
					case '花呗专区':
						return [{
								title: "商品（3）推荐位",
								key: 'first_level',
								imgName: '4.jpg',
								num: 3
							},
							{
								title: "商品（3+4）推荐位",
								key: 'second_level',
								imgName: '2.jpg',
								num: 7
							},
							{
								title: "商品（9）推荐位",
								key: 'third_level',
								imgName: '3.jpg',
								num: 9
							}
						];
					case '热租爆品':
						return [{
								title: "商品（3）推荐位",
								key: 'first_level',
								imgName: '4.jpg',
								num: 3
							},
							{
								title: "商品（3+4）推荐位",
								key: 'second_level',
								imgName: '2.jpg',
								num: 7
							},
							{
								title: "商品（9）推荐位",
								key: 'third_level',
								imgName: '3.jpg',
								num: 9
							}
						];
					case '短租精选':
						return [{
								title: "商品（3）推荐位",
								key: 'first_level',
								imgName: '4.jpg',
								num: 3
							},
							{
								title: "商品（3+4）推荐位",
								key: 'second_level',
								imgName: '2.jpg',
								num: 7
							},
							{
								title: "商品（9）推荐位",
								key: 'third_level',
								imgName: '3.jpg',
								num: 9
							}
						];
					case '租完即送':
						return [{
								title: "商品（1+3）推荐位",
								key: 'first_level',
								imgName: '1.jpg',
								num: 4
							},
							{
								title: "商品（3+4）推荐位",
								key: 'second_level',
								imgName: '2.jpg',
								num: 7
							},
							{
								title: "商品（9）推荐位",
								key: 'third_level',
								imgName: '3.jpg',
								num: 9
							}
						];
					default:
						return [];
				}
			}
		},
		data() {
			return {
				activeNum: 1,
				pageId: '',
				configData: {},
				pageType: '办公设备'
			}
		},
		watch: {
			activeNum(val) {
				if (val) {
					this.setData(val);
				}
			}
		},
		mounted() {
			this.pageType = this.$route.meta.title;
			this.getData();
		},
		methods: {
			submit() {
				release(this.pageId).then(res => {});
			},
			setData(pos) {
				const key = this.sectionList[pos - 1].key;
				const data = {
					main_title: this.configData[key].main_title || '',
					goods: this.configData[key].goods || []
				};
				this.$nextTick(() => {
					this.$refs.compForm.formData = data;
				})
			},
			getData() {
				getActivityPage().then(res => {
					const result = res.find(item => item.title === this.pageType);
					if (result) {
						this.pageId = result.id;
						this.configData = result.details ? JSON.parse(result.details) :
							{
								first_level: {
									goods: [],
									main_title: ''
								},
								second_level: {
									goods: [],
									main_title: ''
								},
								third_level: {
									goods: [],
									main_title: ''
								}
							};
						this.setData(this.activeNum);
					}
				})
			},
			save() {
				let params = this.$refs.compForm.save();
				if (params) {
					editActivityPage({
						id: this.pageId,
						...params
					}).then(res => {
						this.getData();
					})
				}
			},
			preview() {

			},
			release() {

			}
		},
		beforeRouteUpdate(to, from, next) {
			this.activeNum = 1;
			this.pageType = to.$route.meta.title;
			this.getData();
		},
	}
</script>

<style lang="scss" scoped>
	.office_index {
		padding: 0;

		.main {
			height: 73vh;
		}

		.left {
			padding: 30px;
			background-color: #f5f5f5;
			overflow: auto;
		}

		.model_wrap {
			width: 375px;

			&>div.active {
				border: 1px solid $mainBlue;
			}
		}

		.right {
			width: 420px;
			overflow-y: auto;

			.header {
				padding: 15px;
				border-bottom: 1px solid #eeeeee;
			}

			.footer {
				padding: 15px 0;
				border-top: 1px solid #eeeeee;
			}
		}

		.main_form {
			padding: 15px 20px;
		}
	}
</style>
